<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>

<style type="text/css">
	.item {
		display: flex;
		height: 280px;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		background-color: #eee;
		padding: 0;
		margin: 10px 30px;
		border-radius: 3px;
		cursor: pointer;
	}

	.img {
		height: 70%;
		width: 100%;
		border-bottom: 5px solid #e5642b;
		transition: 0.4s;
	}
	.source {
		height: 100%;
		width: 100%;
		padding-bottom: 5px;
	}
	.info {
		min-height: 30%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: 0.4s;
	}

	.more {
		max-height: 35%;
		display: flex;
		flex-direction: column;
		transition: 0.4s;
	}

	.academyName {
		font-size: 140%;
		font-weight: bold;
	}

	.major {
		font-weight: bold;
	}

	.item:hover .img {
		overflow: hidden;
		border-bottom: 0;			
		height: 30%;
		width: 35%;
		border-radius: 0 0 50px 50px;
		transition: 0.4s;
	}

	.item:hover .source {
		height: 110%;
		transition: 0.4s;
	}

	.more {
		width:100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.homepage, .phone, .address {	
		word-break: break-all;
		font-weight: bold;
	}
	
	.options {
		width: 100%;
		position: absolute;
		bottom: 0;
		display: none;
		padding: 10px;
		opacity: 0;
		background-color: #e5642b;
	}

	.item:hover .options {
		display: flex;
		justify-content: center;
		transition: 0.4s;
	}
	
	.options:hover {
		opacity:1;
	}
	
	.glyphicon {
		margin: 0 20px;
	}
	
	.glyphicon-trash:hover {
		color: red;
		cursor: pointer;
	}
	
	.glyphicon-pencil:hover {
		color: blue;
		cursor: pointer;
	}
</style>
		
<div class="container-fluid">
	<div class="row">
	<c:forEach var="academy" items="${academys}" varStatus="status">
		<div data-id="${academy.academyId}" class="item col-xs-12 col-sm-5 col-md-3 col-lg-3">

			<div class="img">
				<image class="source" src="<c:url value='/images/cailiao.jpg'/>" alt="学院图片"></image>
			</div>

			<div class="info">
				<p class="academyName">${academy.academyName}</p>
				<p class="major">${academy.major}</p>
			</div>

			<div class="more">
				<p class="homepage">主页：${academy.homepage}</p>
				<p class="phone">电话：${academy.phone}</p>
				<p class="address">地址：${academy.address}</p>
			</div>	
			
			<div class="options">
				<span data-id="${academy.academyId}" class="glyphicon glyphicon-trash" aria-hidden="true"></span>
				<span data-id="${academy.academyId}" class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
			</div>	
		</div>
		</c:forEach>
	</div>
</div>

<script>
	$('.item').click(function() {
		var id = $(this).attr('data-id');
		if(isEditor(id)){
			top.openModal("/admin/baseInfo/academy/academyDetailed?key="+id+"&mode=3","academy_form","学院详情-查看",780,437);	
		}
	});
	
	$('.options').click(function(event) {
		event.stopPropagation();
	});
	
	$('.glyphicon-trash').click(function() {
		var id = $(this).attr('data-id');
		
		if(isEditor(id)){
			var url=$.getVirtualPath()+"/admin/baseInfo/academy/delete?key="+id;
			deleteDataEx(url,function(data){
				if(data.resultType=="success"){
					formSubmit();
				}
			});
		}
	})

	$('.glyphicon-pencil').click(function() {
		var id = $(this).attr('data-id');
		
		if(isEditor(id)){
			top.openModal("/admin/baseInfo/academy/academyDetailed?key="+id,"academy_form","学院详情-修改",780,437);
		}
	})
</script>
	


<%@ include file="/WEB-INF/views/shared/master/pager.jsp"%>
